<template lang="html">
    <!-- 详情弹窗 -->
    <!-- <el-dialog center :visible.sync="detailsDialog" top="21vh" width="850px" class="detailsDialog"
        :close-on-click-modal="false"> -->
    <div class="detailsDialog">
      <div class="detail-operate">
        <span :class="{'active':detailTab===1}" @click="tabUpdate(1)">发票详情</span>
        <span :class="{'active':detailTab===2}" @click="tabUpdate(2)" v-if="detailObj.picture">查看影像</span>
        <!-- <i class="el-icon-close detailClose" @click="closeDetailDaliog"></i> -->
      </div>

      <div class="detailLeft" :class="invoiceTypeCode === '11'?'detailBg':''">
        <div v-if="detailTab === 1" id="printTicket">
          <!-- 增值税(电子)普通发票 + 专票 -->
          <ZPDT :tickinfo="detailObj" :ticktype="invoiceTypeCode" v-if='["04","10","14","01"].indexOf(invoiceTypeCode) >-1' />

          <!-- 机动车销售统一发票 -->
          <JDC :tickinfo="detailObj" :ticktype="invoiceTypeCode" v-else-if="invoiceTypeCode === '03'" />

          <!-- 增值税普通发票(卷式) -->
          <JP :tickinfo="detailObj" v-else-if="invoiceTypeCode === '11'" />

          <!-- 92是火车票 -->
          <TRAIN :tickinfo="detailObj" v-else-if="invoiceTypeCode === '92'" />

          <!-- 90是航空客运电子客票行程单 -->
          <HKP :tickinfo='detailObj' v-else-if="['93','90'].indexOf(invoiceTypeCode) > -1"/>

          <!-- 87 88 89 客票 -->
          <REAL :tickinfo="detailObj" :ticktype="invoiceTypeCode" v-else-if='["87","88","89"].indexOf(invoiceTypeCode) >-1'/>

          <!-- 其他票样（出租车票、定额、通用机打、汽车、其他等） -->
          <OTHERS :tickinfo="detailObj" :ticktype="invoiceTypeCode" v-else />
        </div>

        <div v-if="detailTab === 2"  class="imgBox">
          <viewer>
            <img :src="detailObj.picture" alt="" />
          </viewer>
          </div>
      </div>
    </div>
    <!-- </el-dialog> -->
</template>

<script>
import ZPDT from "./ticketFotZPDT.vue";
import JDC from "./ticketFotJDC.vue";
import TRAIN from "./ticketTrain.vue";
import JP from "./ticketFotJP.vue";
import HKP from "./ticketElectronic.vue";
import REAL from "./ticketReal";
import OTHERS from "./ticketOthers";
import popdata from "./common";
// import Print from "vue-print-nb";
import Vue from "vue";
// Vue.use(Print);
import Viewer from 'v-viewer';
import 'viewerjs/dist/viewer.css';
Vue.use(Viewer);
Viewer.setDefaults({
  Options: { 'inline': true, 'button': true, 'navbar': true, 'title':false, 'toolbar': true, 'tooltip': true, 'movable': true, 'zoomable': true, 'rotatable': true, 'scalable': true, 'transition': true, 'fullscreen':false, 'keyboard': true, 'url': 'data-source' }
})

export default {
  name: 'v-ticket',    // 声明组件name属性
  mixins: [ popdata ],
  components: {
    ZPDT,
    JDC,
    TRAIN,
    JP,
    HKP,
    REAL,
    OTHERS
  },
  props: {
    // detailsDialog: {
    //     type: Boolean,
    //     default: false
    // },
    detailObj: {
        type: Object,
        default: function() {
            return {};
        }
    },
    detailTableData: {
        type: Array,
        default: function () {
            return [];
        }
    },
    detailType: {
        type: String,
        default: 'common'
    },
    invoiceTypeCode: {
        type: String,
        default: ''
    }
  },
  mounted()  {
  },
  data() {
    return {
      detailTab: 1,
      textarea: ''
    };
  },
  methods: {
    // 打印
    printticket() {
      // let mycanvas = document.getElementsByTagName("canvas")[0];
      // var img = this.convertCanvasToImage(mycanvas);
      // img.style.width = mycanvas.width;
      // img.style.position = "absolute";
      // img.style.left = "0";
      // document.getElementById("qrimg").innerHTML = img;
      // this.$print(this.$refs.print);
    },
    // canvas 转换成图片打印
    convertCanvasToImage (canvas) {
      var image = new Image();
      image.src = canvas.toDataURL("image/png");
      return image;
    },
    // closeDetailDaliog() {
    //   this.detailTab = 1;
    //   this.$emit("closeDetailDaliog");
    // },
    tabUpdate(num) {
      this.detailTab = num;
    }
  },
  destroyed(){
    this.detailTab = 1;
  }
};
</script>

<style lang="scss">
.detailsDialog {
  width: 850px;
  // .el-dialog {
  //   border-radius: 0;
  //   .el-dialog__header {
  //     height: 0 !important;
  //     padding: 0 !important;
  //     .el-dialog__headerbtn {
  //       display: none;
  //       .el-icon-close:before {
  //         content: "" !important;
  //       }
  //     }
  //   }
  //   .el-dialog__body {
  //     padding: 0 !important;
  //     color: #333;
      // 左区域
      .detailLeft {
        width: 850px;
        height: 538px;
        display: inline-block;
        position: relative;
        padding-bottom: 4px;
        background: #fff;
        .imgBox {
          position: absolute;
          left: 0;
          top: 0;
          right: 0;
          bottom: 0;
          div {
            height: 100%;
            img {
              width: 100%;
              height: 100%;
              display: block;
              margin: 0 auto;
            }
          }
        }
        &.detailBg {
          background: #F7F7F7;
          overflow: auto;
        }
      }
      // 操作区域
      .detail-operate {
        width: 850px;
        height: 50px;
        line-height: 50px;
        // position: absolute;
        // top: -50px;
        // left: 0;
        background: #f0f0f0;
        border-radius:4px 4px 0px 0px;
        border:1px solid rgba(221,221,221,1);
        padding-left: 30px;
        box-sizing: border-box;
        .detailClose {
          font-size: 18px;
          position: absolute;
          right: 12px;
          top: 15px;
          color: #999;
          cursor: pointer;
          &:hover {
            color: #666;
          }
        }
        span {
          padding: 0 25px;
          height: 100%;
          display: inline-block;
          font-size: 14px;
          cursor: pointer;
          &.active {
            position: relative;
            font-size: 16px;
            font-weight: bold;
            &:after {
              content: '';
              width: 46px;
              height: 3px;
              background-color: #00b1e3;
              position: absolute;
              bottom: 0;
              left: 50%;
              transform: translateX(-50%);
            }
          }
        }
      }
  //   }
  // }
}
</style>
